<template>
  <div :class="[{isNotHome:!isHome},'blog-nav']">
    <nav :class="[{ishome:isHome},'header-nav']">
      <div class="container">
        <div class="navbar-header">
          <button
            type="button"
            class="navbar-toggle collapsed"
            data-toggle="collapse"
            data-target="#blog-nav"
            aria-expanded="false"
            @click="openModal"
          >
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <router-link to="/" class="navbar-brand">树甙芎 Blog</router-link>
        </div>
        <div class="collapse navbar-collapse" id="blog-nav">
          <div class="collapse-close hidden-sm hidden-md hidden-lg" @click="closeModal">×</div>
          <ul class="nav navbar-nav navbar-right blog-nav-list">
            <li @click="closeModal">
              <router-link to="/">主页</router-link>
            </li>
            <li @click="closeModal">
              <router-link to="/blog">博客</router-link>
            </li>
            <li @click="closeModal">
              <a href="https://www.jianshu.com/u/39470f08f477" target="_blank">简书</a>
            </li>
            <li @click="closeModal">
              <a href="https://blog.csdn.net/weixin_29491885" target="_blank">CSDN</a>
            </li>
            <li @click="closeModal">
              <router-link to="/about">关于</router-link>
            </li>
            <div class="dropdown">
              <a
                href="#"
                class="dropdown-toggle"
                data-toggle="dropdown"
                role="button"
                aria-haspopup="true"
                aria-expanded="false"
              >
                分类
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li v-for="item in series_list" :key="item.series_name" @click="closeModal">
                  <router-link :to="/series/+item.id">{{item.series_name}}</router-link>
                </li>
              </ul>
            </div>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container -->
    </nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
      series_list: "",
      series_url: "/Essay/series_list/30",
      isHome: false
    };
  },
  created() {
    this.getIsHome();
  },
  mounted() {
    this.getSeries();
    this.scrollNav();
    $(window).scroll(() => {
      this.scrollNav();
    });
  },
  methods: {
    openModal() {
      $("html").addClass("wh100");
      $("body").addClass("wh100");
    },
    closeModal() {
      $("#blog-nav").removeClass("in");
      $("html").removeClass("wh100");
      $("body").removeClass("wh100");
    },
    getSeries() {
      this.$http.get(this.domain + this.series_url).then(
        res => {
          this.series_list = res.data;
        },
        res => {
          this.$router.push({ path: "/error" });
        }
      );
    },
    scrollNav() {
      if ($(".swiper")[0]) {
        if (
          $(window).scrollTop() >=
          $(".swiper").outerHeight() - $(".header-nav").outerHeight()
        ) {
          $(".header-nav").addClass("scroll-nav");
        } else {
          $(".header-nav").removeClass("scroll-nav");
        }
      }
    },
    getIsHome() {
      if (this.$route.path == "/") {
        this.isHome = true;
      } else {
        this.isHome = false;
      }
    }
  },
  watch: {
    $route() {
      this.getIsHome();
    }
  }
};
</script>

<style scoped rel="stylesheet/stylus" lang="stylus">
.blog-nav {
  text-align: center;
}

.blog-nav.isNotHome {
  height: 50px;
}

.header-nav {
  background: #020308;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  font-weight: 900;
}

.navbar-toggle .icon-bar {
  background: #fff;
}

.dropdown-menu {
  min-width: 80px;
  text-align: center;
  border: none;
}

.navbar-brand, .dropdown-toggle, .blog-nav-list>li>a {
  text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.5), -1px 0px 1px rgba(0, 0, 0, 0.5);
  color: #fff;
}

.navbar-brand:after {
  display: none;
}

.header-nav a:hover, .header-nav a:focus, nav .open>a {
  background: transparent !important;
}

.navbar-nav .open .dropdown-menu>li>a {
  padding: 10px;
}

.dropdown a {
  padding: 10px 15px;
  display: block;
  line-height: 20px;
  position: relative;
}

.router-link-exact-active:after {
  content: '';
  position: absolute;
  width: 2em;
  bottom: 6px;
  left: 50%;
  margin-left: -1em;
  height: 3px;
  background: #607d8b;
}

.header-nav.ishome {
  background: transparent;
}

.header-nav.scroll-nav {
  background: #020308;
}

@media (max-width: 767px) {
  .header-nav {
    top: 0;
  }

  #blog-nav {
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  #blog-nav a {
    color: #333;
    padding: 15px;
    font-size: 20px;
    line-height: 1.5;
    text-shadow: none !important;
  }

  .collapse-close {
    font-size: 28px;
    padding: 14px 20px;
    color: #607d8b;
    text-align: right;
  }
}

@media (min-width: 768px) {
  .dropdown {
    float: left;
    display: block;
  }

  .dropdown a {
    padding: 15px;
  }
}
</style>
